<template>
    <div class="content">
        <table class="tb">
            <tr>
                <th>选择</th>
                <th>编号</th>
                <th>品牌名称</th>
                <th>品牌价格</th>
                <th>品牌销量</th>
                <th>操作</th>
            </tr>
            <!-- 循环渲染的元素tr -->
            <tr v-for="(item ,index)  in brand" :key="item.id">
                <td><input type="checkbox"></td>
                <!-- <td>{{ item }}</td> -->
                <td>{{ item.id }}</td>
                <td>{{ item.brandName }}</td>
                <td>{{ item.price }}</td>
                <td :class="{counts: item.salesVolume >=100}">{{ item.salesVolume }}</td>
                <td>
                    <button @click="delbtn(index)">删除</button>
                </td>
            </tr>
            <tr v-if="brand.length == 0">
                <td colspan="5">没有数据咯~</td>
            </tr>
            <tr>
                <td>平均价格：</td>
                <td colspan="2">{{ avgPrice }}</td>
                <td>销量的总和：</td>
                <td colspan="2">{{ allCount }}</td>
            </tr>

        </table>

        <form class="forminfo">
            <div class="divd">
                <span>品牌名称：</span>
                <input type="text" placeholder="品牌名称" v-model.trim="brandName">
            </div>
            <div class="divd">
                <span>品牌价格：</span>
                <input type="text" placeholder="品牌价格" v-model.number="price">
            </div>
            <div class="divd">
                <span>品牌销量：</span>
                <input type="text" placeholder="品牌销量" v-model.number="salesVolume">
            </div>
            <button @click.prevent="addbtn" class="btn">提交</button>
        </form>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue'
const brand = ref([
    { id: '1', brandName: '宝马320', price: 17.98, salesVolume: 30 },
    { id: '2', brandName: '奔驰CLA', price: 19.98, salesVolume: 60 },
    { id: '3', brandName: '奥迪A4L', price: 16.98, salesVolume: 100 },
    { id: '4', brandName: '小米YU7', price: 25.98, salesVolume: 130 },

])

const brandName = ref('')
const price = ref(0)
const salesVolume = ref(0)




const delbtn = (index) => { 
    console.log('删除按钮被点击了');
    brand.value.splice(index,1)

}
//添加
const addbtn = () => { 
    if (brandName.value == '' || price.value == 0) { 
        alert('请输入完整信息');
        return
    }
    //数组追加
    brand.value.push({
        id: brand.value.length + 1,
        brandName: brandName.value,
        price: price.value,
        salesVolume: salesVolume.value
    })
}
//价格的平均
const avgPrice = computed(() => { 
    let sum = 0
    brand.value.forEach(item => { 
        sum += item.price
        return sum
    })
    return (sum / brand.value.length).toFixed(2)
})

// 销量的总和
const allCount = computed(() => { 
   return brand.value.reduce((sum,item)=> sum += item.salesVolume,0)
})
</script>

<style scoped>
.content{
    width: 70%;
    height: 600px;
    border: 2px solid black;
    margin: auto;
}
.tb {
    border-collapse: collapse;
    width: 100%;
}

.tb th {
    background-color: #0094ff;
    color: white;
}

.tb td,
.tb th {
    padding: 5px;
    border: 1px solid black;
    text-align: center;
}
.counts{
    color:red
}
.forminfo{
    width: 100%;
    height: 100%;
    /* border: 1px solid black; */
    .divd{
        margin-top: 10px;
        /* width:/ 80%; */
        font-size: 20px;
        font-weight: 800;
       input{
        height: 26px;
        width: 70%;
       }
    }
}
.btn{
color: #f5f3f0;
    background-color: #0b5bea;
    width: 72%;
    height: 47px;
    font-size: 21px;
    border-radius: 15px;
    font-weight: 800;
    margin-left: 92px;
    margin-top: 20px;
}
</style>